<template>
  <div class="short-link-container">
    <!-- 统计侧边栏 -->
    <aside v-if="showStatsSidebar" class="stats-sidebar">
      <ShortLinkStats :short-url="selectedShortUrl" :short-links="shortLinks" :link-groups="linkGroups"
        @close="showStatsSidebar = false" />
    </aside>

    <!-- 背景遮罩 -->
    <div v-if="showStatsSidebar" class="stats-overlay" @click="showStatsSidebar = false"></div>

    <aside class="short-link-sidebar">
      <div class="sidebar-header">
        <span class="sidebar-title">短链接管理</span>
      </div>
      <div class="sidebar-content">
        <div class="sidebar-section">
          <el-button class="sidebar-btn dashboard-btn" @click="handleDashboardClick">
            <el-icon>
              <DataBoard />
            </el-icon>
            <span>数据看板</span>
          </el-button>
        </div>

        <!-- 短链分组 -->
        <div class="sidebar-section">
          <div class="section-header">
            <span class="section-title">短链分组</span>
            <el-button type="primary" size="small" :icon="Plus" @click="showAddGroupDialog = true">
              添加分组
            </el-button>
          </div>
          <div class="group-list">
            <el-button v-for="group in linkGroups" :key="group.groupId" class="sidebar-btn group-btn"
              :class="{ active: selectedGroupId === group.groupId }" @click="handleGroupSelect(group.groupId)">
              <el-icon>
                <Folder />
              </el-icon>
              <span>{{ group.name }}</span>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 回收站 - 固定在底部 -->
      <div class="sidebar-footer">
        <el-button class="sidebar-btn recycle-btn" @click="handleRecycleClick">
          <el-icon>
            <Delete />
          </el-icon>
          <span>回收站</span>
        </el-button>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="short-link-main" :class="{ 'with-stats': showStatsSidebar }">
      <!-- 顶部搜索和创建区域 -->
      <div class="main-header">
        <div class="search-create-section">
          <el-input v-model="searchKeyword" placeholder="输入长链接或短链接进行搜索..." class="search-input" clearable
            @input="handleSearch">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary" :icon="Plus" @click="showCreateDialog = true">
            创建短链
          </el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <el-table :data="filteredShortLinks" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />

          <!-- 短链信息列 -->
          <el-table-column label="短链信息" min-width="200">
            <template #default="{ row }">
              <div class="link-info">
                <div class="link-icon">
                  <img v-if="row.favicon" :src="row.favicon" :alt="row.name" class="favicon-img"
                    @error="handleFaviconError" />
                  <el-icon v-else>
                    <Link />
                  </el-icon>
                </div>
                <div class="link-details">
                  <div class="link-name">{{ row.name }}</div>
                  <div class="link-time">{{ formatTime(row.createdAt) }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <!-- 短链网址列 -->
          <el-table-column label="短链网址" min-width="250">
            <template #default="{ row }">
              <div class="link-urls">
                <div class="short-url">
                  <el-link :href="row.shortUrl" target="_blank" type="primary">
                    {{ row.shortUrl }}
                  </el-link>
                  <el-button size="small" text @click="copyToClipboard(row.shortUrl)">
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                  </el-button>
                </div>
                <div class="original-url">{{ row.originalUrl }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="统计类型" width="80" align="center">
            <template #default="{ row }">
              <div class="stats-labels">
                <div class="label-item">
                  <span class="label-text">今日</span>
                </div>
                <div class="label-item">
                  <span class="label-text">累计</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <!-- 访问测试列 -->
          <el-table-column label="访问次数" width="90">
            <template #default="{ row }">
              <div class="access-test">
                <div class="test-item">
                  <span class="value highlight-value">{{ row.todayVisits }}</span>
                </div>
                <div class="test-item">
                  <span class="value highlight-value">{{ row.totalVisits }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <!-- 访问人数列 -->
          <el-table-column label="访问人数" width="90">
            <template #default="{ row }">
              <div class="visitor-count">
                <div class="count-item">
                  <span class="value highlight-value">{{ row.todayVisitors }}</span>
                </div>
                <div class="count-item">
                  <span class="value highlight-value">{{ row.totalVisitors }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <!-- IP数列 -->
          <el-table-column label="IP数" width="90">
            <template #default="{ row }">
              <div class="ip-count">
                <div class="count-item">
                  <span class="value highlight-value">{{ row.todayIPs }}</span>
                </div>
                <div class="count-item">
                  <span class="value highlight-value">{{ row.totalIPs }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button size="small" text @click="handleEdit(row)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                </el-button>
                <el-button size="small" text @click="handleDelete(row)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
                <el-dropdown @command="(command) => handleMoreAction(command, row)">
                  <el-button size="small" text>
                    <el-icon>
                      <MoreFilled />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="copy">复制链接</el-dropdown-item>
                      <el-dropdown-item command="qr">生成二维码</el-dropdown-item>
                      <el-dropdown-item command="stats">查看统计</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="pagination-wrapper">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            :total="totalItems" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :pager-count="7" prev-text="上一页" next-text="下一页"
            :popper-class="'pagination-dropdown'" :small="false" :background="true" :hide-on-single-page="false" />
        </div>
      </div>
    </main>

    <!-- 创建短链对话框 -->
    <el-dialog v-model="showCreateDialog" title="创建短链" width="600px">
      <el-form ref="createFormRef" :model="createForm" label-width="100px" :rules="createFormRules">
        <el-form-item label="跳转链接" prop="originalUrl">
          <el-input v-model="createForm.originalUrl" placeholder="请输入原始链接" />
        </el-form-item>
        <el-form-item label="短链名称" prop="name">
          <el-input v-model="createForm.name" placeholder="请输入短链名称" />
        </el-form-item>
        <el-form-item label="短链域名" prop="domainId">
          <el-select v-model="createForm.domainId" placeholder="请选择域名" style="width: 100%" :loading="loadingDomains">
            <el-option v-for="domain in userDomains" :key="domain.domainId" :label="`${domain.name} (${domain.domain})`"
              :value="domain.domainId" />
          </el-select>
          <div class="form-tip">选择短链接将使用的域名</div>
        </el-form-item>
        <el-form-item label="短链分组" prop="groupId">
          <el-select v-model="createForm.groupId" placeholder="请选择分组" style="width: 100%" :loading="loadingGroups">
            <el-option v-for="group in linkGroups" :key="group.groupId" :label="group.name" :value="group.groupId" />
          </el-select>
          <div class="form-tip">选择短链接所属的分组</div>
        </el-form-item>
        <el-form-item label="短链有效期">
          <el-radio-group v-model="createForm.validityType">
            <el-radio label="permanent">永久</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
          <el-date-picker v-if="createForm.validityType === 'custom'" v-model="createForm.expiryDate" type="datetime"
            placeholder="请选择到期日" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            style="margin-left: 16px; width: 200px" />
        </el-form-item>
        <el-form-item label="访问上限">
          <el-radio-group v-model="createForm.limitType">
            <el-radio label="unlimited">无</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
          <el-input-number v-if="createForm.limitType === 'custom'" v-model="createForm.visitLimit" :min="1"
            placeholder="请输入上限次数" style="margin-left: 16px; width: 200px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="handleCreateShortLink">创建</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加分组对话框 -->
    <el-dialog v-model="showAddGroupDialog" title="添加分组" width="400px">
      <el-form :model="groupForm" label-width="80px">
        <el-form-item label="分组名称">
          <el-input v-model="groupForm.name" placeholder="请输入分组名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddGroupDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddGroup">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import {
  DataBoard,
  Folder,
  Delete,
  Plus,
  Search,
  Link,
  CopyDocument,
  Edit,
  MoreFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getShortLinks, getLinkGroups, getUserDomains, createShortLink, createGroup } from '@/api'
import type { ShortLink, LinkGroup, UserDomain } from '@/api'
import ShortLinkStats from '@/components/ShortLinkStats.vue'

// 使用从API模块导入的类型定义

// 响应式数据
const searchKeyword = ref('')
const selectedGroupId = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(0)
const showCreateDialog = ref(false)
const showAddGroupDialog = ref(false)
const showStatsSidebar = ref(false)
const selectedShortUrl = ref('')
const selectedRows = ref<ShortLink[]>([])

// 表单引用
const createFormRef = ref()

// 表单数据
const createForm = ref({
  name: '',
  originalUrl: '',
  groupId: '',
  domainId: '',
  validityType: 'permanent',
  expiryDate: '',
  limitType: 'unlimited',
  visitLimit: 1
})

// 表单验证规则
const createFormRules = {
  name: [
    { required: true, message: '请输入短链名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ],
  originalUrl: [
    { required: true, message: '请输入跳转链接', trigger: 'blur' },
    { type: 'url', message: '请输入正确的URL格式', trigger: 'blur' }
  ],
  groupId: [
    { required: true, message: '请选择短链分组', trigger: 'change' }
  ],
  domainId: [
    { required: true, message: '请选择短链域名', trigger: 'change' }
  ]
}

const groupForm = ref({
  name: ''
})

// 响应式数据
const linkGroups = ref<LinkGroup[]>([])
const userDomains = ref<UserDomain[]>([])
const shortLinks = ref<ShortLink[]>([])

// 加载状态
const loadingGroups = ref(false)
const loadingDomains = ref(false)

// 计算属性
const filteredShortLinks = computed(() => {
  return shortLinks.value
})

// 方法
// 加载短链接列表
const loadShortLinks = async () => {
  const response = await getShortLinks({
    groupId: selectedGroupId.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    keyword: searchKeyword.value
  })
  shortLinks.value = response.list
  totalItems.value = response.total
}

// 加载分组列表
const loadGroups = async () => {
  loadingGroups.value = true
  const response = await getLinkGroups()
  linkGroups.value = response
  loadingGroups.value = false
}

// 加载用户域名列表
const loadUserDomains = async () => {
  loadingDomains.value = true
  const response = await getUserDomains()
  userDomains.value = response
  loadingDomains.value = false
}

const handleDashboardClick = () => {
  ElMessage.info('跳转到数据看板')
}

const handleGroupSelect = async (groupId: string) => {
  console.log(groupId)
  selectedGroupId.value = groupId
  currentPage.value = 1
  await loadShortLinks()
}

const handleRecycleClick = () => {
  ElMessage.info('跳转到回收站')
}

const handleSearch = async () => {
  currentPage.value = 1
  await loadShortLinks()
}

const handleSelectionChange = (selection: ShortLink[]) => {
  selectedRows.value = selection
}

const handleEdit = (row: ShortLink) => {
  ElMessage.info(`编辑短链: ${row.name}`)
}

const handleDelete = (row: ShortLink) => {
  ElMessage.warning(`删除短链: ${row.name}`)
}

const handleMoreAction = (command: string, row?: ShortLink) => {
  switch (command) {
    case 'copy':
      ElMessage.info('复制链接功能')
      break
    case 'qr':
      ElMessage.info('生成二维码功能')
      break
    case 'stats':
      if (row) {
        selectedShortUrl.value = row.shortUrl
        showStatsSidebar.value = true
      }
      break
    default:
      ElMessage.info(`执行操作: ${command}`)
  }
}

const handleCreateShortLink = async () => {
  // 验证表单
  if (!createFormRef.value) {
    ElMessage.error('表单引用错误')
    return
  }

  const valid = await createFormRef.value.validate()
  if (!valid) {
    ElMessage.error('请检查表单信息')
    return
  }

  // 构建创建参数
  const createParams = {
    name: createForm.value.name,
    originalUrl: createForm.value.originalUrl,
    groupId: createForm.value.groupId,
    domainId: createForm.value.domainId,
    validityType: createForm.value.validityType,
    expiryDate: createForm.value.validityType === 'custom' ? createForm.value.expiryDate : null,
    limitType: createForm.value.limitType,
    visitLimit: createForm.value.limitType === 'custom' ? createForm.value.visitLimit : null
  }

  const response = await createShortLink(createParams)
  ElMessage.success('短链创建成功')
  showCreateDialog.value = false
  await loadShortLinks()

}

const handleAddGroup = async () => {
  if (!groupForm.value.name) {
    ElMessage.error('请输入分组名称')
    return
  }
  const response = await createGroup({
    name: groupForm.value.name
  })
  showAddGroupDialog.value = false
  groupForm.value.name = ''
  ElMessage.success('分组添加成功')
  await loadGroups()
  if (showCreateDialog.value) {
    // 重新加载分组列表
    // 如果创建短链对话框是打开的，也刷新域名列表
    await loadUserDomains()
  }
}

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('链接已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}

// 处理 favicon 加载失败
const handleFaviconError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
  // 可以在这里添加默认图标或其他处理逻辑
}

const formatTime = (time: string) => {
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const handleSizeChange = async (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  await loadShortLinks()
}

const handleCurrentChange = async (page: number) => {
  currentPage.value = page
  await loadShortLinks()
}

onMounted(async () => {
  // 初始化数据
  await loadGroups()
  await loadUserDomains()

  // 调试信息
  console.log('分组数据加载完成:', linkGroups.value)
  console.log('分组数量:', linkGroups.value.length)

  // 设置默认分组并加载对应的短链接
  if (linkGroups.value.length > 0) {
    const firstGroup = linkGroups.value[0]
    console.log('选择第一个分组:', firstGroup)

    selectedGroupId.value = firstGroup.groupId
    createForm.value.groupId = firstGroup.groupId

    // 加载第一个分组的短链接
    console.log('开始加载短链接，groupId:', selectedGroupId.value)
    await loadShortLinks()
  } else {
    console.log('没有找到分组数据')
  }

  if (userDomains.value.length > 0) {
    createForm.value.domainId = userDomains.value[0].domainId
  }
})

// 监听创建对话框状态，打开时刷新数据，关闭时重置表单
watch(showCreateDialog, async (newVal) => {
  if (newVal) {
    // 对话框打开时，刷新分组和域名数据
    await Promise.all([
      loadGroups(),
      loadUserDomains()
    ])
    // 设置默认值
    if (linkGroups.value.length > 0) {
      createForm.value.groupId = linkGroups.value[0].groupId
    }
    if (userDomains.value.length > 0) {
      createForm.value.domainId = userDomains.value[0].domainId
    }
  } else {
    // 对话框关闭时，重置表单
    createForm.value = {
      name: '',
      originalUrl: '',
      groupId: '',
      domainId: '',
      validityType: 'permanent',
      expiryDate: '',
      limitType: 'unlimited',
      visitLimit: 1
    }
    // 清除表单验证状态
    if (createFormRef.value) {
      createFormRef.value.clearValidate()
    }
  }
})
</script>

<style scoped>
.short-link-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100%;
  background: #f7f8fa;
  overflow: hidden;
  position: relative;
}

/* 统计侧边栏 */
.stats-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 1000px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid #ececec;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  animation: slideInRight 0.3s ease-out;
  border-radius: 8px 0 0 8px;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* 背景遮罩 */
.stats-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 左侧边栏 */
.short-link-sidebar {
  background: #fff;
  border-right: 1px solid #ececec;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sidebar-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  height: 48px;
  display: flex;
  align-items: center;
}

.sidebar-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
}

.sidebar-content {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.sidebar-footer {
  padding: 12px 0;
  border-top: 1px solid #ececec;
  background: #fff;
}

.sidebar-section {
  padding-bottom: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
}

.section-title {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.group-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 覆盖 Element Plus 的默认按钮间距 */
.group-list .el-button+.el-button,
.sidebar-section .el-button+.el-button {
  margin-left: 0;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  border: none;
  background: transparent;
  color: #333;
  text-align: left;
  border-radius: 0;
  transition: all 0.2s ease;
  font-size: 13px;
  padding: 0;
  justify-content: flex-start;
}

.sidebar-btn:hover {
  background: #f0f9ff;
  color: #409eff;
}

.sidebar-btn.active {
  background: #e6f7ff;
  color: #409eff;
  border-right: 2px solid #409eff;
}

.sidebar-btn .el-icon {
  font-size: 14px;
  margin-right: 8px;
  margin-left: 16px;
  min-width: 14px;
}

.sidebar-btn span {
  margin-right: 16px;
}

/* 主内容区域 */
.short-link-main {
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  height: 100%;
  overflow: hidden;
  transition: margin-right 0.3s ease;
}

/* 移除主内容区域的右边距调整，让统计侧边栏浮于页面之上 */
.short-link-main.with-stats {
  /* margin-right: 400px; */
}

.main-header {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #ececec;
}

.search-create-section {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
}

.table-section {
  flex: 1;
  background: #fff;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  /* 确保flex子元素可以正确收缩 */
}

/* 表格样式 */
.el-table {
  margin-bottom: 70px;
  /* 为绝对定位的分页器留出更多空间 */
}

.el-table td {
  padding: 0;
}

.el-table th {
  background-color: #fafafa;
  color: #333;
  font-weight: 500;
  padding: 0;
}

.link-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.link-icon {
  width: 24px;
  height: 24px;
  background: #f0f9ff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  overflow: hidden;
}

.favicon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}

.link-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-name {
  font-weight: 500;
  color: #333;
}

.link-time {
  font-size: 12px;
  color: #999;
}

.link-urls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.short-url {
  display: flex;
  align-items: center;
  gap: 8px;
}

.original-url {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-labels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.label-item {
  display: flex;
  justify-content: center;
  font-size: 13px;
  min-height: 20px;
  align-items: center;
}

.label-text {
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: default;
}

.access-test,
.visitor-count,
.ip-count {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.test-item,
.count-item {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  min-height: 20px;
  align-items: center;
  padding-right: 8px;
}

.value {
  color: #333;
  font-weight: 500;
}

.highlight-value {
  /* color: #f56c6c !important; */
  font-weight: 600;
  text-align: right;
  min-width: 30px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.pagination-wrapper {
  padding: 16px 24px;
  border-top: 1px solid #ececec;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .short-link-container {
    grid-template-columns: 200px 1fr;
  }

  .stats-sidebar {
    width: 350px;
  }

  .short-link-main.with-stats {
    /* margin-right: 350px; */
  }
}

@media (max-width: 1024px) {
  .short-link-container {
    grid-template-columns: 180px 1fr;
  }

  .main-header {
    padding: 12px 16px;
  }

  .table-section {
    padding: 12px;
  }

  .pagination-wrapper {
    padding: 12px 16px;
  }
}

@media (max-width: 768px) {
  .short-link-container {
    grid-template-columns: 160px 1fr;
  }

  .sidebar-header {
    padding: 8px 12px;
  }

  .section-header {
    padding: 0 12px 8px;
  }

  .sidebar-btn {
    padding: 0;
    height: 32px;
    font-size: 12px;
  }

  .sidebar-btn .el-icon {
    margin-right: 6px;
    margin-left: 12px;
  }

  .sidebar-btn span {
    margin-right: 12px;
  }

  .sidebar-section {
    padding-bottom: 12px;
  }

  .stats-sidebar {
    width: 100%;
    right: 0;
  }

  .short-link-main.with-stats {
    /* margin-right: 0; */
  }
}

/* 分页器中文样式 */
.pagination-wrapper .el-pagination {
  font-size: 14px;
}

/* 表格行样式优化 */
.el-table__row {
  transition: background-color 0.2s ease;
}

.el-table__row:nth-child(even) {
  background-color: #fafafa;
}

.el-table__row:hover {
  background-color: #f0f9ff;
}

.pagination-wrapper .el-pagination .el-pagination__total {
  color: #606266;
}

.pagination-wrapper .el-pagination .el-pagination__sizes {
  margin-right: 16px;
}

.pagination-wrapper .el-pagination .el-pagination__jump {
  margin-left: 16px;
}

/* 创建短链对话框样式 */
.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  line-height: 1.4;
}

/* 表单验证样式 */
.el-form-item.is-error .el-input__inner {
  border-color: #f56c6c;
}

.el-form-item.is-error .el-select .el-input__inner {
  border-color: #f56c6c;
}
</style>
